<template>
  <div class="getMacaroni">
    <div class="getMacaroniHeader">    	
    	<div class="goBack" @click="$router.go(-1)">
    		<img src="../../assets/image/macaroni/goback2.png" alt="" />
    	</div>
    	<div class="hTitle">
    		<p>我的通币</p>
    	</div>
    	<div class="help" @click="goMacaroniDetail">
    		<p>明细</p>
    	</div>
    </div>
    <div class="macaroniSigninDetail">    	
    	<div class="macaroniHelp" @click="goMacaroniExplain">
    		<img src="../../assets/image/macaroni/help.png" alt="" />
    	</div>
    	<div class="macaroniSums">
    		<div class="macaroniSum">
    			<h2>{{macaroniTotalNum}}</h2><p>个</p>	
    		</div>    		
    	</div>
    	<div class="macaroniIntroduce">
    		<p>小通币&nbsp;,&nbsp;有大作用&nbsp;,&nbsp;多领一些囤起来</p>
    	</div>
    	<div class="macaroniSignin" @click="signInAlert">
    		<img src="../../assets/image/macaroni/signIn2.png" alt="" />    		
    	</div>
    	<div class="macaroniDays">
    		<p>已连续签到:{{signDates}}天</p>
    	</div>
    </div>
    <div class="macaroniBlank"></div>
    <!--活动-->
    <div class="lotteryDaily" v-if="actData" @click="goLotteryActivity">
    	<img :src="actData" alt=""/>
    </div>
    <div class="exchangeTicket">
    	<img src="../../assets/image/macaroni/title.png" alt="" />
    </div>
    <div class="exchangeTicketList" v-for="item in allData.CASHVOLUME">
    	<div class="TicketListImgs" 
    		:class="{ticket1:item.SUBJECT=='糕点券',ticket2:item.SUBJECT=='咖啡券',ticket3:item.SUBJECT=='保养券',ticket4:item.SUBJECT=='钣喷券',ticket5:item.SUBJECT=='汽车用品券'}"
    		>
    		<div class="ticketInfo1" :class="{oticketInfo1:item.AMOUNT<10,bgticketInfo1:item.SUBJECT=='汽车用品券'}">
    			<p :class="{color1:item.SUBJECT=='糕点券',color2:item.SUBJECT=='咖啡券',color3:item.SUBJECT=='保养券',color4:item.SUBJECT=='钣喷券',color5:item.SUBJECT=='汽车用品券'}">{{item.SUBJECT}}</p>
    		</div>
    		<div class="ticketInfo2">
    			<p>¥</p>
    		</div>
    		<div class="ticketInfo3">
    			<p>{{item.AMOUNT}}</p>
    		</div>
    		<div class="ticketInfo4" :class="{oticketInfo4:item.AMOUNT>=10&&item.AMOUNT<100}">
    			<p>元代金券</p>
    		</div>
    		<div class="ticketInfo5" :class="{oticketInfo5:item.AMOUNT>=10&&item.AMOUNT<100}">
    			<p>满{{item.USABLE_PRICE}}可用</p>
    		</div>
    		<div class="ticketInfo9">
    			<p>有效期：{{item.AVAILDAYS}}天</p>
    		</div>
    		<div class="ticketInfo6">
    			<p>{{item.INTEGRAL}}通币</p>
    		</div>
    		<div class="ticketInfo7">
    			<img src="../../assets/image/macaroni/divideLine.png" alt="" />
    		</div>
    		<div class="ticketInfo8" @click="goToExchange(item.ID)">
    			<p>立即兑换</p>
    			<img src="../../assets/image/macaroni/arrow.png" alt="" />
    		</div>    		
    	</div>    	
    </div>
    <div class="getMaBlank"></div>
    
    	<!--签到弹窗-->
    	<popup v-model="popupVisible" height="100%" >
	    	<div class="popupImg">
	    		<div class="popupImgSignin">
	    			<img src="../../assets/image/macaroni/tongAlert.png" alt="" />	
	    		</div>
	    		<div class="popupImgClose" @click="noShowAlert">
	    			<img src="../../assets/image/close.png" alt="" />	
	    		</div>
	    	</div>
	  	</popup>
  </div>
</template>
<script>
/*获取通币*/
import {XHeader,Popup,Alert} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"getMacaroni",
  // 数据
  data(){

    return{
    	userId:'',      
    	city:'',
    	macaroniTotalNum:'',//通币总数
    	imgUrl:'',//商品图片Url
    	category:'',//1-商品 2-代金券
    	signDates:'',//签到天数
    	signCode:'',//签到状态码1-正常返回 2-该用户当天已签到，无需二次签到
    	allData:'',//代金券数据
    	popupVisible:false,//弹窗是否可见
    	actUrl:'',//活动url    
    	actData:'',//图片数据
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    this.city = sessionStorage.getItem('city');//城市
    //this.userId = 169623;
    //获取会员经验值、等级、通币
    this.$fetchPost('/ExperienceValueWeb/getMemberInfoByUserId',{USER_ID:this.userId}).then(res=>{
    				//console.dir(res);
            if(res.STATUS_CODE == 1){
            		this.macaroniTotalNum = res.INTEGRAL;
            }                                 
    },err=>console.log(err));
    //会员签到
    this.$fetchGet('/MemberIntegralWeb/memberSign',{USER_ID:this.userId}).then(res=>{    
    				//console.dir(res);            
        		this.signDates = res.SIGN_DAYS;
        		this.signCode = res.STATUS_CODE;                                          
    },err=>console.log(err));
    //通币换券，兑换代金券
    this.$fetchGet('/MemberIntegralWeb/getExchangePro',{CATEGORY:2}).then(res=>{    		
    				//console.dir(res);
            if(res.STATUS_CODE == 1){
            		this.imgUrl = res.IMG_URL;
            		this.category = res.CATEGORY;
                this.allData = res;
            }                                 
    },err=>console.log(err));    
    //活动url
    let thisURL = document.URL;
		let phone = thisURL.split("=")[1];//get方式跨页面传值
    this.$fetchPost('/ActWeb/getActivityById',{PHONE:phone,ACT_ID:2017062302}).then(res=>{    		
    				//console.dir(res);    
    				if(res.STATUS_CODE == 1){
            		this.actUrl = res.RESULT_DATA[0].LINK_URL;//取第一条活动                
            }
    },err=>console.log(err));
    //获取图片    
    this.$fetchPost('/CommonService/getHomeImages.action',{CITY:this.city}).then(res=>{
          if(res.STATUS_CODE==1){
            //console.log(res);
            this.actData = res.RESULT_DATA[0].TONGBI_ADVERT[0].MEDIA_PATH;            
          }
        },err=>{
          console.log(err);
        })
    
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    	//签到弹窗
    	signInAlert(){
    		if(this.signCode==2){    			
    			this.$vux.alert.show({title:'提示',content:'亲,今天已签到,明天再来吧!'});return;
    		}    		
    		this.popupVisible = true;
    	},
    	//关闭弹窗
    	noShowAlert(){    		
    		this.popupVisible = false;    		
    	},
    	//签到明细
    	goMacaroniDetail(){
    		this.$router.push('/macaroniDetail');
    	},
    	//权益说明
    	goMacaroniExplain(){
    		this.$router.push('/macaroniExplain');
    	},
    	//跳转抽奖活动
    	goLotteryActivity(){    		  		
    		location.href = 'http://carnt.carnettong.com:8088/CARNT/lolita/lolita.jsp?actId=1009110&fromPhone=15013979931&gid=222398447562';
    	},
    	//去兑换
    	goToExchange(id){
    		//console.dir(id);
    		//兑换物品
    		let obj = {};
    		obj.USER_ID = this.userId;
    		obj.CATEGORY = this.category;
    		obj.EXCHANGE_ID = id;
    		this.$fetchPost('MemberIntegralWeb/createExchangeOrder',obj).then(res=>{    		    				 
    				if(res.STATUS_CODE == 1){
        		   this.$vux.alert.show({title:'提示',content:'兑换成功!'});             
           }else if(res.STATUS_CODE == 2){            	
            	this.$vux.alert.show({title:'提示',content:'会员可用积分不够，兑换失败!'});
           }else if(res.STATUS_CODE == 15){
           		this.$vux.alert.show({title:'提示',content:'缺少参数!'});
           }else{
           		this.$vux.alert.show({title:'提示',content:'服务器异常!'});
           }
    		},err=>console.log(err));
    	},
  },
  // 子组件
  components:{
    XHeader,
    Popup,
    Alert
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.getMacaroni{
	background:#f2f2f2;
	position:relative;
  	.getMacaroniHeader{
  		width:7.5rem;
  		height:4.13rem;
  		background:url('../../assets/image/macaroni/background1.png');
  		background-size:7.5rem 4.13rem;  		
  		display:flex;
  		position:relative;
  		z-index:2;  		
  		.goBack{  			
  			width:25%;
  			height:1rem;  			  			
  			display:flex;
  			flex-flow:column;
  			justify-content:center;
  			img{
  				width:0.2rem;
  				height:0.37rem;
  				margin-left:0.3rem;
  			}
  		}
  		.hTitle{
  			width:50%;
  			height:1rem;
  			display:flex;
  			flex-flow:column;
  			justify-content:center;  			
  			p{
  				font-size:0.36rem;
  				color:#fff;
  				align-self:center;
  			}
  		}
  		.help{
  			width:25%;
  			height:1rem;
  			display:flex;
  			flex-flow:column;
  			justify-content:center;  			
  			p{
  				font-size:0.28rem;
  				color:#fff;
  				align-self:flex-end;
  				margin-right:0.3rem;
  			}
  		}
  	}
  	.macaroniSigninDetail{  	  			
  		width:6.8rem;
  		height:4.06rem;
  		//background:#fff;
  		background:url('../../assets/image/macaroni/bag.png') no-repeat center;
  		background-size:8rem 5.06rem; 
  		display:flex;
  		flex-flow:column;  		
  		border-radius:0.2rem;
  		//box-shadow:0 0.1rem 0.2rem #e9e9e9;  	  		
		position:absolute;
		top:1.0rem;
		left:0.35rem;  				
  		z-index:2;
  		.macaroniHelp{
  			display:flex;
	  		flex-flow:column;		  			
  			img{
  				align-self:flex-end;
  				width:0.46rem;
  				height:0.46rem;
  				margin-top:0.16rem;
  				margin-right:0.20rem;
  			}
  		}
  		.macaroniSums{
  			display:flex;  	
  			justify-content:center;		  								
  			.macaroniSum{
  				display:flex;
  				align-self:flex-end;
  				padding-top:0.8rem; 
  				//border:1px solid red; 				
  				h2{  					
	  				font-size:1rem;
	  				color:#ec383f;	 
	  				font-weight:bold; 				
	  			}
	  			p{	  				
	  				align-self:flex-end;
	  				margin-bottom:0.24rem;
	  				margin-left:0.1rem;	  					  			
	  				font-size:0.4rem;
	  				color:#ec383f;	  				
	  			}
  			}  			
  		}
  		.macaroniIntroduce{  				
  			p{
  				font-size:0.26rem;
  				color:#f94d38;
  				font-weight:lighter;
  			}
  		}
  		.macaroniSignin{  			
  			display:flex;
  			flex-flow:column;
  			justify-content:center;
  			margin-top:0.32rem;
  			margin-bottom:0.22rem;
  			img{
  				border:none;
  				align-self:center;
  				width:5.56rem;
  				height:1.32rem;
  				border-radius:0.1rem;  				 	
  				opacity:40%;			  				
  			}
  		}
  		.macaroniDays{
  			margin-bottom:0.22rem;
  			p{
  				font-size:0.3rem;
  				color:#999;  				
  				margin-bottom:0rem;
  			}
  		}
  	}
  	.macaroniBlank{
  		height:1.2rem;
  		background:#f2f2f2;
  	}
  	.lotteryDaily{
  		width:7.5rem;
  		height:1.53rem;  		
  		img{
  			width:7.2rem;
  			//height:1.53rem;
  			height:1.8rem;
  			box-shadow:0 0.1rem 0.2rem #f2f2f2; 
  		}
  	}
  	.exchangeTicket{
  		margin-top:-0.06rem;  		
  		img{
  			width:2.47rem;
  			height:0.29rem;
  			
  		}
  	}
  	.exchangeTicketList{
  		width:6.8rem;
  		height:2.01rem;  		
  		margin:0 auto;
  		margin-bottom:0.2rem;
  		box-shadow:0 0.1rem 0.2rem #f2f2f2; 
  		position:relative;
  		.TicketListImgs{
  			width:6.8rem;
  			height:2.01rem;	
  			.ticketInfo1{  
  				width:1.15rem;				
  				min-height:0.51rem;
  				position:absolute;
  				top:0.32rem;
  				left:2.65rem;
  				background:url('../../assets/image/macaroni/shortDialog1.png') no-repeat;
  				background-size:1.15rem 0.51rem;
  				//border:1px solid blue;
  				display:flex;
  				justify-content:center;
  				p{  					
  					align-self:center;
  					font-size:0.22rem;
  					color:#fd5c5c;
  					padding:0 0.15rem;    					
  					padding-top:-0.1rem;		
  				}
  				.color1{
  					color:#fd5c5c;
  				}
  				.color2{
  					color:#ff7d55;
  				}
  				.color3{
  					color:#ff8401;
  				}
  				.color4{
  					color:#ffc601;
  				}
  				.color5{  					
  					color:#64b8f8;
  					background:url('../../assets/image/macaroni/longDialog.png') no-repeat;  					  										
  				}
  				
  			}
  			.oticketInfo1{
  				position:absolute;
  				top:0.32rem;
  				left:2.2rem;
  			}
  			.bgticketInfo1{
  				width:1.55rem;
  				height:0.51rem;
  				background:url('../../assets/image/macaroni/longDialog.png') no-repeat;
  				background-size:1.55rem 0.51rem;  				
  			}
  			.ticketInfo2{
  				position:absolute;
  				top:0.84rem;
  				left:0.18rem;
  				p{
  					font-size:0.46rem;
  					color:#fff;
  				}
  			}
  			.ticketInfo3{
  				margin-left:0.48rem;
  				padding-top:0.5rem;  				
  				width:1rem;
  				display:flex;  				
  				p{  					
  					font-size:0.8rem;
  					color:#fff;
  				}
  			}
  			.ticketInfo4{
  				position:absolute;
  				top:0.6rem;
  				left:1.1rem;
  				//border:1px solid blue;
  				p{
  					font-size:0.24rem;
  					color:#fff;
  				}
  			}
  			.oticketInfo4{
  				position:absolute;
  				top:0.6rem;
  				left:1.6rem;  				
  			}
  			.ticketInfo5{
  				position:absolute;
  				top:0.96rem;
  				left:1.1rem;
  				p{
  					font-size:0.24rem;
  					color:#fff;
  				}
  			}
  			.oticketInfo5{
  				position:absolute;
  				top:0.96rem;
  				left:1.6rem;  				
  			}
  			.ticketInfo6{
  				width:2.5rem;
  				height:1.2rem;
  				display:flex;
  				justify-content:center;
  				position:absolute;  				
  				top:0rem;
  				right:0rem;
  				p{
  					align-self:center;
  					font-size:0.42rem;
  					color:#585858;
  				}
  			}
  			.ticketInfo7{
  				width:2.5rem;
  				height:0.2rem;
  				display:flex;
  				justify-content:center;
  				position:absolute;  				
  				top:1rem;
  				right:0rem;
  				img{
  					align-self:center;
  					width:1.16rem;
  					height:0.02rem;
  				}
  			}
  			.ticketInfo8{
  				width:2.5rem;
  				height:0.88rem;
  				display:flex;
  				justify-content:center;
  				position:absolute;
  				bottom:0rem;
  				right:0rem;  	  							
  				p{
  					align-self:center;
  					font-size:0.30rem;
  					color:#585858;
  				}
  				img{
  					align-self:center;
  					width:0.26rem;
  					height:0.18rem;  	
  					position:absolute;
  					right:0.30rem;
  					bottom:0.34rem;				
  				}
  			}  		
  			.ticketInfo9{
  				position:absolute;
  				bottom:0.1rem;
  				left:0.2rem; 
  				p{
  					font-size:0.26rem;
  					color:#fff;
  				}
  			}	
  		}
  		//1-糕点券 2-咖啡券 3-保养券 4-钣喷券 5-汽车用品券
  		.ticket1{
  			background:url('../../assets/image/macaroni/cakesTicket.png') no-repeat;
  			background-size:6.8rem 2.01rem;  					
  		}
  		.ticket2{
  			background:url('../../assets/image/macaroni/cafeTicket.png') no-repeat;
  			background-size:6.8rem 2.01rem;;  			
  		}
  		.ticket3{
  			background:url('../../assets/image/macaroni/maintainTicket.png') no-repeat;
  			background-size:6.8rem 2.01rem;;  			
  		}
  		.ticket4{
  			background:url('../../assets/image/macaroni/gushTicket.png') no-repeat;
  			background-size:6.8rem 2.01rem;;  			
  		}
  		.ticket5{
  			background:url('../../assets/image/macaroni/carproduct.png') no-repeat;
  			background-size:6.8rem 2.01rem;;  			
  		}
  	}
  	
  	.popupImg{
  		width:7.5rem;
  		height:13.34rem;
  		background:#EDE9E9;
  		display:flex;
  		flex-flow:column;
  		justify-content:center;  		
  		z-index:99999;
  		.popupImgSignin{
  			img{
	  			align-self:center;
	  			width:6.3rem;
	  			height:5.8rem;
  			}	
  		}
  		.popupImgClose{
  			img{
  				align-self:center;
	  			width:0.54rem;
	  			height:0.54rem;	
  			}  			
  		}
  	}
  	.getMaBlank{
  		height:0.5rem;
  		background:#f2f2f2;
  	}
}
</style>